<template>
  <div class="echart-container" ref="pieEchart"></div>
</template>

<script>
import {pieParticularsJump} from "@/api/user";

export default {
  props: {
    optionData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    startTime: {
      type: Number,
      default: 0
    },
    endTime: {
      type: Number,
      default: 0
    }
  },

  mounted() {
    this.myChart = this.$echarts.init(this.$refs.pieEchart);
    this.$watch(
      "optionData",
      () => {
        this.initChart();
      },
      {
        deep: true,
      }
    );
  },

  methods: {
    initChart() {
      let option = {
        title: {
          show: true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: this.optionData.data.reduce((n, i) => {
            return (n += i.value)
          }, 0),//主标题文本，'\n'指定换行
          link: '',//主标题文本超链接,默认值true
          target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
          subtext: this.optionData.title || '',//副标题文本，'\n'指定换行
          sublink: '',//副标题文本超链接
          subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
          x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: 'center',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
          backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: '#ccc',//标题边框颜色,默认'#ccc'
          borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
          padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 10,//主副标题纵向间隔，单位px，默认为10
          textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 36,
            fontWeight: 'normal',
            color: '#5CFBFF'
          },
          subtextStyle: {//副标题文本样式{"color": "#aaa"}
            fontSize: 18,
            fontWeight: 'normal',
            color: '#949BA4'
          },
          zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          type: 'scroll',
          orient: this.optionData.orient||"vertical",
          width:  (this.optionData.width && `${this.optionData.width}px`) ||'',
          pageIconColor:"#5CFBFF",
          right:
            (this.optionData.right && `${this.optionData.right}px`) || "center",
          top: (this.optionData.top && `${this.optionData.top}px`) || "80px",
          itemGap: this.optionData.gap || 5,//图例之间的间距
          formatter: [
            '{a|{name}}'
          ].join('\n'),
          textStyle: this.optionData.textStyle || {
            rich: {
              a: {
                width: 55,
                fontSize: 16,
                color: "#949BA4",
          },
              }
            },
        },
        color: this.optionData.color || ["#58EEF2", "#63ACFF", "#AF81FF", "#FFCC99", "#FF8276", "#FF574D", "#99CC99", "#FF190A"],
        series: [
          {
            // name: "Access From",
            type: "pie",
            // radius: "50%",
            radius: this.optionData.radius || ["40%", "70%"], //["40%", "70%"],
            label: {
              show: true,
              // position: "top",
              formatter: '{c} ({d}%) \n {value|{b}}',// 显示柱子对应的数据值
              textStyle: {
                color: "#5CFBFF", // 修改字体颜色为红色
                fontSize: 18, // 修改字体大小为12px
                rich: {
                  value: {
                    color: "#949BA4",
                    fontSize: 16,
                  }
                }
              },
            },
            data: this.optionData.data,
            labelLine: {
              normal: {
                length: 35,     // 指示线宽度
                lineStyle: {
                  color: "#A8D5DC"    // 指示线颜色
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.myChart.setOption(option);

      // 点击 携带参数 跳转
      // .off('click') 防止触发两次
      this.myChart.off('click').on('click', (params) => {
        // 返回该时间段的图片信息 跳转到指定页面展示
        let data = {
          str: params.name,
        }
        this.jumpSpecifyTime(data);
      })
    },
    async jumpSpecifyTime (data) {
      const that = this;

      let res = await pieParticularsJump({str:data.str,
        startTime:this.startTime.toString(),
        endTime:this.endTime.toString()});

      if(res.code === 200) {
        // 跳转展示页面
        that.$emit("showTimeFrequency",{time:data.str, count:res.data.length, data:res.data});
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.echart-container {
  width: 100%;
  height: 100%;
}
</style>